.user_page_three {
  background:linear-gradient(0deg,rgba(52,41,22,1) 0%,rgba(71,59,34,1) 99%);
  .user_page_three_top {
     padding: rem(40) 0;
    .user_page_three_top_content {
      width: rem(697); height: rem(956); margin: 0 auto;
      background: url($imgPath + '/member/user_page_three/un_member_top_bg.png') no-repeat top center;
      background-size: 100% 100%; position: relative;
      .shopping_rights_bg {
        width: rem(350); height: rem(100);
        position: absolute; top: rem(240); left: rem(50);
      }
      .open_vip_btn {
        width: rem(180); height: rem(100);
        position: absolute; top: rem(240); right: rem(50);
      }
    }
  }
  .user_page_three_prd {
    width: rem(736); height: rem(1066); margin: 0 auto;
    background: url($imgPath + '/member/user_page_three/hot_prd_bg.png') no-repeat top center;
    background-size: 100% 100%; position: relative;
    .user_page_three_prd_top {
      position: absolute; top: rem(330); padding: 0 rem(45);
      .user_page_three_prd_top_content {
        display: flex; justify-content: flex-start;
        .left {
          img { width: rem(198); height: rem(198); }
        }
        .product_right {
          padding-left: rem(40);
          .product_name {
            font-size: rem(26); color: #F4E5C7;
            overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          }
          .product_details {
            display: flex; justify-content: space-between; align-items: center; padding-top: rem(15);
            p {
              font-size: rem(20); color: #E0CEA9;
              &:nth-child(2) {
                font-size: rem(30); color: #333333;
                padding: rem(4) rem(20); border-radius: rem(30);
                background:linear-gradient(240deg,rgba(221,195,146,1) 0%,rgba(245,231,202,1) 99%);
              }
            }
            .product_details_content {
              white-space: nowrap; width: rem(200); overflow: hidden; text-overflow: ellipsis;
            }
          }
          .product_bottom {
            width: rem(405); height: rem(42); margin-top: rem(20);
            background: url($imgPath + '/member/user_page_three/qiang.png') no-repeat top center;
            background-size: 100% 100%;
            p {
              font-size: rem(24); color: #FFFFFF; padding: rem(3) 0 0 rem(20);
              span { font-weight:bold; }
            }
          }
        }
      }
      .tetui {
        width: rem(78); height: rem(52);
        background: url($imgPath + '/member/user_page_three/tetui_tips.png') no-repeat top center;
        background-size: 100% 100%;
        position: absolute; top: rem(5); left: rem(22);
      }
    }
    .user_page_three_prd_bottom {
      position: absolute; top: rem(570);
      .user_page_three_prd_content {
        margin: rem(20) rem(30); text-align: left; width: rem(680);
        white-space:nowrap;
        overflow-x: scroll; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; //有回弹效果
        display: flex; align-items: center;
        .user_product_card {
          width: rem(270); height: rem(450);  display: inline-block;
          margin-left: rem(20); position: relative;
          // &:last-child {
          //   margin-right: rem(20);
          // }
          .user_product_img {
            position: relative;
            img {
              width: rem(270); height: rem(260);
            }
            p {
              font-size: rem(16); color: #020202;
              background: url($imgPath + '/member/user_page_three/product_right_bg.png') no-repeat top center;
              background-size: 100% 100%; width: rem(270); height: rem(42); line-height: rem(42); text-align: center;
              position: absolute; bottom: 0;
              overflow: hidden; text-overflow:ellipsis;
            }
          }
          .more_prd {
             width: rem(270); height: rem(450); padding-right: rem(20);
             img {
               width: rem(270); height: rem(265);
             }
             .more_prd_btn {
                margin-top: rem(50); text-align: center;
               span {
                 text-align: center; display: inline-block;
                 font-size: rem(24); color: #333333;
                 padding: rem(16) rem(28); border: 1px solid #C5C5C5; border-radius: rem(30);
               }
             }
           }
          .user_product_name {
            font-size: rem(26); color: #17273A; margin-top: rem(20); text-align: left;
              overflow: hidden; text-overflow:ellipsis; height: rem(60); line-height: rem(32);
              -webkit-line-clamp: 2; word-break: break-all; display: -webkit-box;
              -webkit-box-orient: vertical;
              white-space: pre-wrap; word-wrap: break-word; word-break: normal;
          }
          .user_product_details {
            font-size: rem(20); color: #999999; padding-top: rem(20);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          }
          .user_product_price {
            font-size: rem(30); color: #E91F3F; padding-top: rem(10);
          }
          .hots_tips {
            width: rem(64); height: rem(76);
            background: url($imgPath + '/member/user_page_three/hot_tips.png') no-repeat top center;
            background-size: 100% 100%;
            position: absolute; top: 0; left: rem(10);
          }
        }
      }

    }
  }
  .user_page_three_12_rights {
    padding-top: rem(60);
    .user_page_three_rights_content {
      text-align: center;
      .prd_1 {
        width: rem(729); height: rem(1049); display: inline-block;
        background: url($imgPath + '/member/user_page_three/prd_1.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .getShoppingGoods {
          position: absolute; top: rem(90); right: rem(0);
          width: rem(150); height: rem(80);
        }
        .getShare {
          position: absolute; top: rem(580); right: rem(0);
          width: rem(150); height: rem(80);
        }
      }
      .coupon_rights {
        width: rem(729); height: rem(346); display: inline-block;
        background: url($imgPath + '/member/user_page_three/coupon_bg.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .coupon_content {
          margin: rem(142) rem(32) rem(32) rem(12); text-align: left;
          white-space:nowrap; width: rem(705);
          overflow-x: scroll; overflow-y: hidden;
          -webkit-overflow-scrolling: touch; //有回弹效果
          // display: flex; align-items: center;
          img { width: rem(240); height: rem(158); padding-left: rem(20);}
        }
        .getCoupon {
          position: absolute; top: rem(20); right: rem(0);
          width: rem(150); height: rem(80);
        }
      }
      .prd_2 {
        width: rem(729); height: rem(899); display: inline-block;
        background: url($imgPath + '/member/user_page_three/prd_2.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .getDiscount {
          position: absolute; top: rem(10); right: rem(0);
          width: rem(150); height: rem(80);
        }
        .getIntegral {
          position: absolute; top: rem(480); right: rem(0);
          width: rem(150); height: rem(80);
        }
      }
      .prd_3 {
        width: rem(729); height: rem(863); display: inline-block;
        background: url($imgPath + '/member/user_page_three/prd_3.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .getDiscount {
          position: absolute; top: rem(10); right: rem(0);
          width: rem(150); height: rem(100);
        }
        .getIntegral {
          position: absolute; top: rem(360); right: rem(0);
          width: rem(150); height: rem(100);
        }
      }
      .prd_4 {
        width: rem(729); height: rem(445); display: inline-block;
        background: url($imgPath + '/member/user_page_three/prd_4.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .getSeckill {
          position: absolute; top: rem(10); right: rem(0);
          width: rem(150); height: rem(100);
        }
      }
      .right_1 {
        width: rem(710); height: rem(220); display: inline-block; margin-top: rem(20);
        background: url($imgPath + '/member/user_page_three/right_1.png') no-repeat top center;
        background-size: 100% 100%; position: relative;
        .getFamily {
          position: absolute; top: rem(10); left: rem(300);
          width: rem(180); height: rem(100);
        }
      }
      .right_2 {
        width: rem(710); height: rem(220); display: inline-block; margin-top: rem(30);
        background: url($imgPath + '/member/user_page_three/right_2.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .right_3 {
        width: rem(710); height: rem(220); display: inline-block; margin-top: rem(30);
        background: url($imgPath + '/member/user_page_three/right_3.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .right_4 {
        width: rem(710); height: rem(220); display: inline-block; margin-top: rem(30);
        background: url($imgPath + '/member/user_page_three/right_4.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .right_more {
        padding: rem(58) 0;
        p {
          font-size: rem(24); color: #F4E5C7; padding: rem(30) rem(155); border: 1px solid #6B5F45;
          display: inline-block; border-radius: rem(12);
        }
      }
    }
  }
  .user_page_three_bottom {
    font-size: rem(36); color: #333333;
    width: 100%; height: rem(120); line-height: rem(120); text-align: center; font-weight:bold;
    background:linear-gradient(240deg,rgba(221,195,146,1) 0%,rgba(245,231,202,1) 99%);
  }
}
